import { fabric } from 'fabric'
const defaultOptions = {
    top: 100,
    left: 100,
    fill: 'transparent',
    stroke: 'blue',
    strokeWidth: 2
}
class MyCanvas {
    canvas;
    constructor(id, options) {
        // 创建画布
        this.canvas = new fabric.Canvas(id, options)
        this.addEvents()
    }
    addEvents() {
        // 缩放画布
        this.canvas.on('mouse:wheel', opt => {
            let delta = opt.e.deltaY // 滚轮向上滚一下是 -100，向下滚一下是 100
            let zoom = this.canvas.getZoom() // 获取画布当前缩放值
            zoom *= 0.999 ** delta
            if (zoom > 20) zoom = 20
            if (zoom < 0.01) zoom = 0.01
            this.canvas.setZoom(zoom)
            opt.e.preventDefault()
            opt.e.stopPropagation()
        })
        // 鼠标点击事件
        this.canvas.on('mouse:down', opt => { // 鼠标按下时触发
            let evt = opt.e
            if (evt.altKey === true) { // 是否按住alt
                this.canvas.isDragging = true // isDragging 是自定义的
                this.canvas.lastPosX = evt.clientX // lastPosX 是自定义的
                this.canvas.lastPosY = evt.clientY // lastPosY 是自定义的
            }
        })

        this.canvas.on('mouse:move', opt => { // 鼠标移动时触发
            if (this.canvas.isDragging) {
                let evt = opt.e
                let vpt = this.canvas.viewportTransform // 聚焦视图的转换
                vpt[4] += evt.clientX - this.canvas.lastPosX
                vpt[5] += evt.clientY - this.canvas.lastPosY
                this.canvas.requestRenderAll()
                this.canvas.lastPosX = evt.clientX
                this.canvas.lastPosY = evt.clientY
            }
        })
        this.canvas.on('mouse:up', opt => { // 鼠标松开时触发
            this.canvas.setViewportTransform(this.canvas.viewportTransform) // 设置此画布实例的视口转换  
            this.canvas.isDragging = false
          })
    }
    // 创建矩形
    createRect(options) {
        let triangle = new fabric.Rect(Object.assign(defaultOptions, options))
        this.canvas.add(triangle)
    }
    // 创建圆形
    createCircle(options) {
        const circle = new fabric.Circle(Object.assign(defaultOptions, options),(circleInfo) => {
            console.log("circleInfo----",circleInfo)
        })
        this.canvas.add(circle)
    }
    // 创建菱形
    createLX(options) {
        // 创建一个菱形的坐标点数组
        const diamondPoints = [
            { x: 0, y: -50 },
            { x: 50, y: 0 },
            { x: 0, y: 50 },
            { x: -50, y: 0 }
        ];
        const Lxing = new fabric.Polygon(diamondPoints, Object.assign(defaultOptions, options))
        this.canvas.add(Lxing)
    }
    // 给canvas添加底图
    addBackImgHandle(imgUrl) {
        fabric.Image.fromURL(imgUrl, img => {
            this.canvas.setBackgroundImage(
                img,
                this.canvas.renderAll.bind(this.canvas),
                {
                    scaleX: this.canvas.width / img.width,
                    scaleY: this.canvas.height / img.height
                }
            )
        })
    }

    // 创建三角形
    createTrangle(options) {
        const triangle = new fabric.Triangle(Object.assign(defaultOptions, options))
        this.canvas.add(triangle)
    }
    // 预览 序列化 输出为png
    preview() {
        console.log("序列化信息",this.canvas.toDataURL('png'))
        return this.canvas.toDataURL('png')
    }
    // 保存 序列化 输出为json
    toJson() {
        return this.canvas.toJSON()
    }
    // 保存 序列化 输出为Object
    toObj() {
        return this.canvas.toObject()
    }
    // 获取当前选中元素
    getActiveElement() {
        if (!this.canvas) return false;
        return this.canvas.getActiveObject()
    }
    // 重绘画布
    renderAll() {
        if (!this.canvas) return
        this.canvas.requestRenderAll();
    }

    // 清除画布
    disposeCanvas() {
        if (!this.canvas) return;
        this.canvas.dispose();
    }

    // 清空画布
    clearCanvas() {
        if (!this.canvas) return;
        this.canvas.clear();
    }
}
export default MyCanvas;